<template>
  <div id="ng_commonality">
      <Header></Header>
      <div :class="['ng_page', bool ? 'navigationPage2' : 'navigationPage1']">
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color=transparent
            text-color="white"
            active-text-color="white">
            <el-menu-item index="1">BUILDING MATERIAL</el-menu-item>
            <el-menu-item index="2">FURNITURE</el-menu-item>
            <el-menu-item index="3">APPLIANCE</el-menu-item>
            <el-menu-item index="4">DESIGNER</el-menu-item>
            <el-menu-item index="5">HEADLINES</el-menu-item>
            <!-- <el-menu-item index="5">Story</el-menu-item> -->
        </el-menu>
      </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
export default {
  data () {
    return {
      bool:true,  //头部导航栏是否添加隐藏显示的类名
    }
  },
  components: {
    Header
  },
  methods: {
    // 导航栏，跳转到对应的页面
      handleSelect(key) {
        var _this = this;
        switch(Number(key)) {
          case 1:
            _this.$router.push({"path": "./buildingMaterial",});
            break;
          case 2:
            _this.$router.push({"path": "./furniture"});
            break;
          case 3:
            _this.$router.push({"path": "./appliance"});
            break;
          case 4:
            _this.$router.push({"path": "./brand"});
            break;
          case 5:
            console.log("暂时没开通，请点击其它");
            break;
          case 6:
            console.log("暂时没开通，请点击其它");
            break;
          default:
            console.log("出现错误");
        }
      },
      // 滚动条
      windowScroll() {
          // 滚动条距离页面顶部的距离
          // 以下写法原生兼容
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          if(scrollTop > 700){
            this.bool=false;
          }else{
            this.bool=true;
          }
      },
    },
    mounted() {
      // 添加屏幕监听事件
      window.addEventListener('scroll', this.windowScroll);
      // jq
      $(document).ready(function () {
        // 导航栏的悬停
          $('.el-menu-demo').find("li:eq(0)").mouseover(function () {
              $(this).text('建材');
          });
          $('.el-menu-demo').find("li:eq(0)").mouseout(function () {
              $(this).text('BUILDING MATERIAL');
          });
          $('.el-menu-demo').find("li:eq(1)").mouseover(function () {
              $(this).text('家具');
          });
          $('.el-menu-demo').find("li:eq(1)").mouseout(function () {
              $(this).text('FURNITURE');
          });
          $('.el-menu-demo').find("li:eq(2)").mouseover(function () {
              $(this).text('电器');
          });
          $('.el-menu-demo').find("li:eq(2)").mouseout(function () {
              $(this).text('APPLIANCE');
          });
          $('.el-menu-demo').find("li:eq(3)").mouseover(function () {
              $(this).text('设计师');
          });
          $('.el-menu-demo').find("li:eq(3)").mouseout(function () {
              $(this).text('DESIGNER');
          });
          $('.el-menu-demo').find("li:eq(4)").mouseover(function () {
              $(this).text('头条');
          });
          $('.el-menu-demo').find("li:eq(4)").mouseout(function () {
              $(this).text('HEADLINES');
          });
          // $('.el-menu-demo').find("li:eq(3)").mouseover(function () {
          //     $(this).text('简介');
          // });
          // $('.el-menu-demo').find("li:eq(3)").mouseout(function () {
          //     $(this).text('Brief introduction');
          // });
          // $('.el-menu-demo').find("li:eq(4)").mouseover(function () {
          //     $(this).text('头条');
          // });
          // $('.el-menu-demo').find("li:eq(4)").mouseout(function () {
          //     $(this).text('Headlines');
          // });
          // 结束
        });
    },
    beforeDestroy () {
        // 删除屏幕高度监听
        window.removeEventListener("scroll", this.windowScroll);
    },
}
</script>

<style lang="less" scoped>

// 导航栏
#ng_commonality{
  width: 100%;
  min-width: 1190px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}
#ng_commonality horizontal>.el-menu-item{clear: both; display: flex!important;}
.el-menu-demo{
  display: flex;
  justify-content: center;
}
// 滚动条大于800px就隐藏导航栏
.navigationPage1{
  transform:translateY(-61px);
  opacity: 0;
  display: none;
}
// 滚动条小于于800px就显示导航栏
.navigationPage2{
  transform:translateY(0px);
  background-color: rgba(0, 0, 0, 0.5);  //透明背景
  opacity: 1;
  display: block;
}
.el-menu-item {
  font-size: 15px;
  letter-spacing:2px;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}
.el-menu-item:nth-child(1) {
  width: 235px;
}
.el-menu-item:nth-child(2) {
  width: 160px;
}
.el-menu-item:nth-child(3) {
  width: 150px;
}
.el-menu-item:nth-child(4) {
  width: 150px;
}
// .el-menu-item:nth-child(5) {
//   width: 150px;
// }
/deep/ .el-menu-item:hover {
  background-color: transparent !important;
}
/deep/ .v-modal{
  z-index: 900!important;
}
/deep/ .el-header[data-v-fae5bece]{
  line-height: 20px!important;
}
.el-menu.el-menu--horizontal{
  border: none;
}
</style>